<template>
  <div>
    <el-form
      ref="formDataSampleRegistration"
      class="base-pipeline-layout"
      :model="formDataSampleRegistration"
      status-icon
      label-width="110px"
    >
      <el-form-item
        label="报废日期"
        :error="errorMsgSampleRegistration.scrapDate"
        prop="scrapDate"
      >
        <el-date-picker
          v-model="formDataSampleRegistration.scrapDate"
          :disabled="readOnly"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"

        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="送样人员"
        :error="errorMsgSampleRegistration.sampleDeliveryPerson"
        prop="sampleDeliveryPerson"
      >
        <el-input
          v-model="formDataSampleRegistration.sampleDeliveryPerson"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="送样日期"
        prop="sampleDeliveryDate"
        :error="errorMsgSampleRegistration.sampleDeliveryDate"
      >
        <el-date-picker
          v-model="formDataSampleRegistration.sampleDeliveryDate"
          :disabled="readOnly"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="样品接收人员"
        :error="errorMsgSampleRegistration.permissionUserName"
      >
        <el-input
          v-model="formDataSampleRegistration.permissionUserName"
          disabled
          style="width: 100%"
          autocomplete="off"
        ></el-input>
        <div class="chioseUser" @click="chioseUser">+</div>
      </el-form-item>
      <el-form-item
        label="样品接收日期"
        prop="sampleReceivingDate"
        :error="errorMsgSampleRegistration.sampleReceivingDate"
      >
        <el-date-picker
          v-model="formDataSampleRegistration.sampleReceivingDate"
          :disabled="readOnly"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注"
      prop="remark"
      :error="errorMsgSampleRegistration.remark">
        <el-input
          v-model="formDataSampleRegistration.remark"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <ChoiceUserMessage
      ref="ChoiceUserMessage"
      :dialog-form-visible="dialogFormVisible"
      @closeChioseUser="closeChioseUser"
      @close="closeDialog"
    />
  </div>
</template>
<script>
import { shortTime, computeYmd } from "../../../utils/moment.js";
import ChoiceUserMessage from "./ChoiceUserMessage.vue";
export default {
  name: "FormDataSampleRegistration",
  components: { ChoiceUserMessage },
  props: {
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      formDataSampleRegistration: {
        id: 0,
        // 报废日期默认三个月之后的
        scrapDate: computeYmd(shortTime(new Date()), 3),
        sampleDeliveryPerson: "",
        sampleDeliveryDate: shortTime(new Date()),
        permissionUserId: this.$store.getters.currentUserId,
        permissionUserName: this.$store.getters.name,
        sampleReceivingDate: shortTime(new Date()),
        // 样品业务状态
        sampleBusinessStatusCode: 10,
        remark: "",
      },
      formDataSampleRegistrationRules: {
        scrapDate: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunctionPositiveNumber,
          },
        ],
        sampleDeliveryPerson: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        sampleDeliveryDate: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunctionPositiveNumber,
          },
        ],
        permissionUserId: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunctionPositiveNumber,
          },
        ],
        sampleReceivingDate: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunctionPositiveNumber,
          },
        ],
        remark: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
      errorMsgSampleRegistration: {
        scrapDate: "",
        sampleDeliveryPerson: "",
        sampleDeliveryDate: "",
        permissionUserId: "",
        sampleReceivingDate: "",
        remark: "",
      },
    };
  },
  watch: {},
  created() {},
  methods: {
    // 选择人员
    chioseUser() {
      if (!this.readOnly) {
        this.dialogFormVisible = true;
      }
    },
    closeDialog() {
      this.dialogFormVisible = false;
    },
    // 选择的人员信息
    closeChioseUser(data) {
      this.formDataSampleRegistration.permissionUserName = data.name;
      this.formDataSampleRegistration.permissionUserId = data.id;

      this.dialogFormVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.chioseUser {
  width: 30px;
  color: white;
  font-size: 20px;
  height: 32px;
  text-align: center;
  border-radius: 5px;
  border: 1px silver;
  background-color: #4787ff;
  position: absolute;
  top: 0px;
  right: 0px;
}
</style>
